<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>登录</title>
<meta name="keywords" content="后台">
<meta name="description" content="后台">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel='stylesheet' type='text/css' href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap/assets/skin/default_skin/css/theme.css}">
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap/assets/admin-tools/admin-forms/css/admin-forms.css}">
<link rel="shortcut icon" th:href="@{/bootstrap/assets/img/favicon.ico}" href="/favicon.ico" />
<link rel="bookmark" th:href="@{/bootstrap/assets/img/favicon.ico}" href="/favicon.ico" type="image/x-icon" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
   <![endif]-->
</head>
<body class="external-page external-alt sb-l-c sb-r-c">

	<!-- Start: Main -->
	<div id="main" class="animated fadeIn">

		<!-- Start: Content-Wrapper -->
		<section id="content_wrapper">

			<!-- Begin: Content -->
			<section id="content">

				<div class="admin-form theme-info mw500" id="login">

					<!-- Login Logo -->
					<div class="row table-layout">
						<a href="dashboard.html" title="Return to Dashboard"> <img th:src="@{/bootstrap/assets/img/logos/logo.png}"
							title="Logo" class="center-block img-responsive" style="max-width: 275px;">
						</a>
					</div>
					<!-- Login Panel/Form -->
					<div class="panel mt30 mb25">
						<form method="post" th:action="@{/login}" id="login-form">
							<div class="panel-body bg-light p25 pb15">
							
								<div class="alert alert-danger light alert-dismissable" id="alert-error" style="display: none;">
						            <i class="fa fa-info pr10"></i>
						            <span>msg</span>
						        </div>
							
								<!-- Username Input -->
								<div class="section">
									<label for="username" class="field-label text-muted fs18 mb10">账号</label> <label for="username"
										class="field prepend-icon"> <input type="text" name="username" id="username" class="gui-input"
										placeholder="请输入账号"> <label for="username" class="field-icon"> <i class="fa fa-user"></i>
									</label>
									</label>
								</div>

								<!-- Password Input -->
								<div class="section">
									<label for="username" class="field-label text-muted fs18 mb10">密码</label> <label for="password"
										class="field prepend-icon"> <input type="password" name="password" id="password" class="gui-input"
										placeholder="请输入密码"> <label for="password" class="field-icon"> <i class="fa fa-lock"></i>
									</label>
									</label>
								</div>

								<div class="section">
									<label for="captcha" class="field-label text-muted fs18 mb10">验证码</label>
									<div class="smart-widget sm-left sml-120">
										<label for="captcha" class="field prepend-icon"> <input type="text" name="captcha" id="captcha"
											class="gui-input" placeholder="请输入验证码"> <label for="verification" class="field-icon"> <i
												class="fa fa-shield"></i></label>
										</label> <label for="captcha" class="button" style="padding: 0"> <img th:src="@{/bootstrap/blank.gif}"
											style="height: 38px; width: 118px; line-height: 42px; margin-top: -4px" id="captcha-image" />
										</label>
									</div>
									<!-- end .smart-widget section -->
								</div>
								<!-- end section -->

							</div>

							<div class="panel-footer clearfix">
								<button type="submit" class="button btn-primary mr10 pull-right">登录</button>
								<label class="switch ib switch-primary mt10"> <input type="checkbox" name="remember" id="remember"
									checked> <label for="remember" data-on="是" data-off="否"></label> <span>记住我</span>
								</label>
							</div>

						</form>
					</div>

					<!-- Registration Links -->
					<div class="login-links">
						<p>
							<a href="http://admindesigns.com/demos/admin/theme/pages_login-alt.html" class="active" title="Sign In">忘记密码？</a>
						</p>
					</div>
				</div>

			</section>
			<!-- End: Content -->

		</section>
		<!-- End: Content-Wrapper -->

	</div>
	<!-- End: Main -->


	<!-- BEGIN: PAGE SCRIPTS -->

	<!-- jQuery -->
	<script th:src="@{/bootstrap/vendor/jquery/jquery-1.11.1.min.js}"></script>

	<!-- jQuery Validate Plugin-->
	<script th:src="@{/bootstrap/assets/admin-tools/admin-forms/js/jquery.validate.min.js}"></script>

	<script th:src="@{/bootstrap/assets/js/utility/utility.js}"></script>
  
	<script type="text/javascript" th:inline="javascript">
		var base = /*[[${#httpServletRequest.getContextPath()}]]*/"";
		jQuery(document).ready(function() {

			"use strict";

			$("#captcha-image").attr("src", base + "/captcha.jpg?_t=" + new Date().getTime());
			
			$("body").on("click", "#captcha-image", function() {
				$("#captcha-image").attr("src", base + "/captcha.jpg?_t=" + new Date().getTime());
				return false;
			});

			$("#login-form").validate({

				errorClass : "state-error",
				validClass : "state-success",
				errorElement : "em",

				rules : {
					username : {
						required : true,
						minlength : 4,
						maxlength : 20
					},
					password : {
						required : true,
						minlength : 6,
						maxlength : 16
					},
					captcha : {
						required : true
					}

				},

				messages : {
					username : {
						required : '请输入账号',
						minlength : '账号至少4位',
						maxlength : '账号最多只能20位'
					},
					password : {
						required : '请输入密码',
						minlength : '密码至少6位',
						maxlength : '密码最多只能16位'
					},
					captcha : {
						required : '请输入验证码'
					}
				},

				submitHandler : function(form) {
					var $form = $(form);
					$.post($form.attr("action"), $form.serialize(), function(result) {
						if (result.success) {
							location.href = base + "/index";
						} else {
							$("#alert-error span").text(result.msg);
							$("#alert-error").fadeIn();
							$("#captcha-image").attr("src", base + "/captcha.jpg?_t=" + new Date().getTime());
						}
					}, "json");
				},

				highlight : function(element, errorClass, validClass) {
					$(element).closest('.field').addClass(errorClass).removeClass(validClass);
				},
				unhighlight : function(element, errorClass, validClass) {
					$(element).closest('.field').removeClass(errorClass).addClass(validClass);
				},
				errorPlacement : function(error, element) {
					if (element.is(":radio") || element.is(":checkbox")) {
						element.closest('.option-group').after(error);
					} else {
						error.insertAfter(element.parent());
					}
				}

			});
		});
	</script>
	<!-- END: PAGE SCRIPTS -->

</body>
</html>
